<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link type="text/css" href="css/reservation.css" rel="stylesheet" />
<!-- <link rel="stylesheet" href="css/jquery-ui.css"> -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div id="contents">
	<nav>
		<ul>
			<li><a>예매하기</a></li>
			<li><a>예매확인/취소</a></li>
			<li><a>예매안내</a></li>
		</ul>
	</nav>
	<div id="rev">
		<div id="plmov">
			<h2>상영중인 영화</h2>
			<ul>
				<c:forEach var="mov" items="${movie_list}">
					<li>
						<a href="#" onclick="getther(${mov.movno})" class="mov_title" >${mov.title}</a>						
					</li>
				</c:forEach>
			</ul>			
		</div>
		<div id="cinema">
		<h2>영화관</h2>
		<div id="cinemab">			
			<div id="accordion">
			<h3><a class="sido" href="">서울</a></h3>
			<div class="area"></div>
			<h3><a class="sido" href="">인천/경기</a></h3>
			<div class="area"></div>			
			<h3><a class="sido" href="">대전/충청,강원</a>	</h3>
			<div class="area"></div>
			<h3><a class="sido" href="">부산,대구,울산/경상</a></h3>
			<div class="area"></div>
			<h3><a class="sido" href="">광주/전라,제주</a>	</h3>
			<div class="area"></div>
			</div>
		</div>
		</div>
		<div id="date">
		<h2>날짜</h2>
		<div id="dateb">
			<p>예매하실 날짜를 선택해주세요.</p>
			<div id="playdate"></div>
			<input type="hidden" id="hiddendate" />
			<c:forEach var="d" items="${date}">
				<input type="hidden" class="h_pdate" value="${d.shdate}" />
			</c:forEach>
		</div>
		</div>
		<div id="movtime">
			<h2>시간</h2>
			<div id="movtimeb">
			
			</div>
		</div>		
		<div id="revinfo">
			<div id="selmovinfo">
			</div>
			<div id="seletc">
				
			</div>
			<div id="revbutton">
				<button type="button" class="btn btn-danger" id="seatsbtn" data-toggle="modal" data-target="#seatsModal" disabled="disabled">
					<h1>좌석선택</h1>
				</button>
			</div>			
		</div>
	</div>	
</div>

<div class="modal fade" id="seatsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="seatsModalLabel">영화 예매</h2>
      </div>
      <div class="modal-body">
        
      </div>
      <div class="modal-footer">
      	
        <button type="button" class="btn btn-default" data-dismiss="modal">닫 기</button>        
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>

var array = new Array();
var str = "";
for (var i = 0; i<$(".h_pdate").length; ++i){
	array.push($(".h_pdate").eq(i).val());
}
	$("#playdate").datepicker({
		dateFormat: 'yy-mm-dd',
  	    monthNames: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  	    monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
  	    dayNames: ['일','월','화','수','목','금','토'],
  	    dayNamesShort: ['일','월','화','수','목','금','토'],
  	    dayNamesMin: ['일','월','화','수','목','금','토'],
  	    showMonthAfterYear: true,
  	    yearSuffix: '년',
		altField: "#hiddendate",
		altFormat: "yy-mm-dd",
		beforeShowDay: function(date){
	        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
	        
	        var	result = array.indexOf(string) != -1;
	       
	        return [ result ];
	    }
	});
</script>

<script>
function getther(movno){ 
		var reqAjax = $.ajax({
			url: "sel_title.bi", 
			type: "GET", 
			data: { movno: movno }
		});
		reqAjax.done(function(result){
			$("#cinemab *").remove();
			getdate(0, 0);
			gettime(0, 0, 0);
			getimg(movno);
			$("#seatsbtn").attr("disabled", "disabled");
			$(result).appendTo("#cinemab");
		});
		reqAjax.fail(function (jqXHR, status){
			alert("error : " + status);
		}); 
};
function getdate(movno, zipseq, cinename){ 
	var reqAjax = $.ajax({
		url: "sel_cine.bi", 
		type: "GET", 
		data: { movno: movno, zipseq: zipseq }
	});
	reqAjax.done(function(result){
		getCinema(cinename);
		$("#dateb *").remove();
		gettime(0, 0, 0);
		$("#seatsbtn").attr("disabled", "disabled");
		$(result).appendTo("#dateb");
		
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	}); 
};
function gettime(movno, zipseq, shdate){ 
	var reqAjax = $.ajax({
		url: "sel_date.bi", 
		type: "GET", 
		data: { movno: movno, zipseq: zipseq, shdate: shdate }
	});
	reqAjax.done(function(result){
		$("#movtimeb *").remove();
		$(result).appendTo("#movtimeb");
		$("#seatsbtn").attr("disabled", "disabled");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	}); 
};
function getimg(movno){ 
	var reqAjax = $.ajax({
		url: "get_img.bi", 
		type: "GET", 
		data: { movno: movno }
	});
	reqAjax.done(function(result){
		$("#selmovinfo *").remove();
		$(result).appendTo("#selmovinfo");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	}); 
};
function getCinema(cinename){ 
	var reqAjax = $.ajax({
		url: "get_cine.bi", 
		type: "GET", 
		data: { cinename: encodeURIComponent(cinename) }
	});
	reqAjax.done(function(result){
		$("#seletc *").remove();
		$(result).appendTo("#seletc");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	}); 
};

function getseat(movno, cno, shdate, shtime){	
	var reqAjax = $.ajax({
		url: "sel_seat.bi", 
		type: "GET", 
		data: { movno: movno, cno: cno, shdate: shdate, shtime: shtime }
	});
	reqAjax.done(function(result){
		$("#seatsModal .modal-body *").remove();
		$(result).appendTo("#seatsModal .modal-body");
		$("#seatsbtn").removeAttr("disabled");
	});
	reqAjax.fail(function (jqXHR, status){
		alert("error : " + status);
	}); 
};

</script>
<c:if test="${not empty imgnum}">
	<script>getther('${imgnum}')</script>
</c:if>